<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>窗口2</title>
</head>

<body>
    <h1>测试postmessage</h1>
    <button id="btn2">发送消息</button>
    <script>

        const btn2 = document.querySelector("#btn2")
        btn2.addEventListener("click", () => {
            // 发送消息
            const channel = new BroadcastChannel('tab-communication');
            channel.postMessage({
                action: 'update',
                data: { id: 123, status: 'completed' }
            });
            channel.close()
        })
    </script>
    <script>

        import { useState, useEffect, useRef, useCallback,useMemo } from 'react';
import { qs } from "@weapp/utils"
import { Button, Carousel } from '@weapp/ui';
import { actionEsbId, actionEsbId_searchId } from "../config/configLoad.js"

const MainStatus = ({ projectInfo }) => {
  const projectIdref = useRef("")
  const [projectDatas, setProjectDatas] = useState([]); //项目阶段数据

  const [timeStr, setTimeStr] = useState("");
  const swiperInstaceRef=useRef(null)

  useEffect(() => {
    console.log("初始化加载")
    const channel = new BroadcastChannel('ecode-communication-1167299500438552580'); //注册频道
    // 接收消息
    channel.onmessage = (event) => {
      console.log('收到广播消息:', event.data);
      // 处理消息...
      const time_str = new Date().getTime();
      // if (event.data?.action === "refreshCom") setTimeStr(time_str);
      setProjectDatas([...projectInfo])
    }
    return () => {
      channel.close();
    }
  }, [])
  useEffect(() => {
    const index = projectDatas.findIndex(item => item.status === false);
    if (index !== -1 ) {
      // swiperSlideNum(index)
      console.log("实例状态",swiperInstaceRef.current)
    };
  }, [projectDatas])
  useEffect(() => {
    setProjectDatas(projectInfo)
    const search = window?.location?.search;
    const paramStr = qs.parse(search, { ignoreQueryPrefix: true });
    setProjectId(paramStr.projectId || "")
    setProjectType(paramStr.projectType || "")
    projectIdref.current = paramStr.projectId; //缓存项目id
    getStageStatus(paramStr.projectId)
  }, [timeStr])



  // 获取状态数据
  const getStageStatus = async (projectId) => {
    const ebsdk = window.ebuilderSDK;
    // 动作流：二开查询一级主管四个状态
    const { mainTable } = await ebsdk.callEsbFlow(actionEsbId, { dataId: projectId }, []);
    const datas = projectInfo.map(item => {
      return {
        ...item,
        status: mainTable[item.esbAttrText] === "0" ? true : false
      }
    })

    setProjectDatas(datas)
    if (mainTable.isXF === "0") getProjectTaskDataId();
  }
  const swiperSlideNum = useCallback((index) => {

    swiperInstaceRef.current?.slideTo(index)
  }, [])


  // 滚动块切换的回调
  const onSlideChangeHandler = (swiperInstance) => {
    console.log('切换了')
  }
  // swiper加载完成回调
  const onSwiperLoadHandler = useCallback((ins) => {
    console.log("实例加载完成",ins)
    swiperInstaceRef.current = ins
  },[])




  // 渲染下方滚动区域
  const renderContentstage = useCallback(() => {
    return projectDatas.map((data, index) => {
      return (<div className="itemSwiper" style={{ padding: "40px" }}>

        <div className="leftInfo">
          <div className="title"> {data.jdmc}</div>
          <div className="describe"> {data.jdms}</div>
          <div className="btn">
            {
              renderbtns(data)
            }
            {
              index !== projectDatas.length - 1 && <Button type="primary"
                size="large"
                onClick={() => { swiperInstace?.slideNext() }}
                className="nextbtn">下一步</Button>
            }
          </div>
        </div>

        <div className="rightbigImg">
          <img src="${appRes}/testrightbig.png" alt="" />
        </div>

      </div>)
    })
  },[projectDatas])
  const renderCarousel=useMemo(()=>{
    return <Carousel
          fillWays="imgFill"
          navigation={false} //切换按钮 显隐
          speed={1000} //速度
          pagination={false}
          onSlideChange={onSlideChangeHandler}
          onSwiper={onSwiperLoadHandler}
          loop={false}
        >
          {
            renderContentstage()
          }
        </Carousel>
  },[])
  return (
    <>
      <div className="stageChunk">
        {renderHanderChunk()}
      </div>
      <div className="stageContent">
        {renderCarousel}
      </div>
    </>
  )
}
export default MainStatus
    </script>
</body>

</html>